<template>
  <div ref="statsContainer" class="stats-container"></div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue'
import Stats from 'three/examples/jsm/libs/stats.module.js'

const statsContainer = ref<HTMLElement>()
let stats: Stats | null = null

onMounted(() => {
  if (!statsContainer.value) return

  stats = new Stats()
  stats.showPanel(0)
  statsContainer.value.appendChild(stats.dom)
})

onUnmounted(() => {
  stats?.dom.remove()
})

defineExpose({
  update: () => stats?.update()
})
</script>

<style>
.stats-container canvas {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  pointer-events: none;
}
</style>